<template>
	<view class="root">
		<bar class="bar" :tip=tipBar :check="current" @changeCheck="changeCheck"></bar>
		<view class="body w8" :style="{boxShadow: `0 0 15rpx ${tipBar[current]};`}">
			<view v-if="current == 0" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">姓名:</view>
					<butt class="flex3" :content="result.procData.nickName"></butt>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">申请时间:</view>
					<view style="line-height: 70rpx; color: #888888;" class="flex3">{{result.procData.applyImmTime}}</view>
				</view>
			</view>

			<view v-else-if="current == 1" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核员:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.taskName}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">状态:</view>
					<butt class="flex3" :bgc="tipBar[current]" width="300" :content="getState(result.processStep.chu.state)"></butt>
				</view>
				<view v-if="result.processStep.chu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核时间:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.handleTime}}</view>
				</view>
				<view v-if="result.processStep.chu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核意见:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.chu.handleOpinion}}</view>
				</view>
			</view>
			
			
			<view v-else-if="current == 2" class="w9">
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核员:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.taskName}}</view>
				</view>
				<view style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">状态:</view>
					<butt class="flex3" :bgc="tipBar[current]" width="300" :content="getState(result.processStep.fu.state)"></butt>
				</view>
				<view v-if="result.processStep.fu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核时间:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.handleTime}}</view>
				</view>
				<view v-if="result.processStep.fu.state != 1" style="flex-wrap: wrap;" class="flex w10 body-item">
					<view style="line-height: 70rpx;" class="blod flex1">审核意见:</view>
					<view  style="line-height: 70rpx; color: #888888;" class="flex3">{{result.processStep.fu.handleOpinion}}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import bar from "@/components/ui/tg-bar.vue"
	import butt from '@/components/ui/myButt.vue'
	export default {
		computed: {

		},
		components: {
			bar,
			butt
		},
		data() {
			return {
				current: 0,
				tipBar: ['#63C3FF', '#FF6B6B', '#D1D1D1'],
				"result": {}
			}
		},
		async onLoad() {
			var res=await this.$api.userImmigrationProcessInfo();
			console.log(res)
			this.result = res.data.result
			this.result.procData = JSON.parse(this.result.procData)
			
			switch(this.result.processStep.chu.state){
				case 2:{
					this.current = 1;
					this.tipBar[1] = '#63C3FF';
					break;
				}
				case 1:{
					this.current = 1;
					this.tipBar[1] = '#D1D1D1';
					break;
				}
				case 0:{
					this.current = 1;
					this.tipBar[1] = '#FF6B6B';
					break;
				}
			}
			
			switch(this.result.processStep.fu.state){
				case 2:{
					this.current = 2;
					this.tipBar[2] = '#63C3FF';
					break;
				}
				case 1:{
					this.tipBar[2] = '#D1D1D1';
					break;
				}
				case 0:{
					this.current = 2;
					this.tipBar[2] = '#FF6B6B';
					break;
				}
			}
		},
		methods: {
			getState(state){
				if(state == 2){
					return '审核通过！'
				}else if(state == 1){
					return '审核中'
				}else{
					return '审核未通过'
				}
			},
			changeCheck(e) {
				this.current = e.index;
				console.log(this.current)
			}
		}
	}
</script>
<style scoped>
	.body-item::before {
		content: "";
		display: block;
		width: 750rpx;
		height: 30rpx;
	}

	.root::before {
		content: "";
		display: block;
		width: 750rpx;
		height: 50rpx;
	}

	.body {
		height: 800rpx;
		margin: 50rpx auto;
		border-radius: 15rpx;
		transition: box-shadow 0.5s;
	}
</style>
